<template>
  <div class="demo-image">
    <div v-for="fit in picInfo" :key="fit" class="block">
      <span class="demonstration">{{ fit.urlInfo }}</span>
      <el-image style="width: 100px; height: 100px" :src="fit.url"
                v-if="!fit.urlInfo.includes('proxy_pass')" />
      <span class="demonstration" v-else>{{ getInfo(fit) }}</span>

    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ImageProps } from 'element-plus'
import {ref} from  'vue'
import axios from "axios";
const picInfo = ref( [
  {
    url:"http://8.153.69.172:10001/alias1/alias/test1.png",
    urlInfo:"alias1"
  },
  {
    url:"http://8.153.69.172:10001/alias2/alias/test1.png",
    urlInfo:"alias2"
  },
  {
    url:"http://8.153.69.172:10001/alias3/alias/test1.png",
    urlInfo:"alias3"
  },
  {
    url:"http://8.153.69.172:10001/alias4/alias/test1.png",
    urlInfo:"alias4"
  },
  {
    url:"http://8.153.69.172:10001/root1/root/test1.png",
    urlInfo:"root1"
  },
  {
    url:"http://8.153.69.172:10001/root2/root/test1.png",
    urlInfo:"root2"
  },
  {
    url:"http://8.153.69.172:10001/root3/root/test1.png",
    urlInfo:"root3"
  },
  {
    url:"http://8.153.69.172:10001/root4/root/test1.png",
    urlInfo:"root4"
  },
  {
    url:"http://8.153.69.172:10001/proxy_pass1/captchaImage",
    urlInfo:"proxy_pass1"
  },
  {
    url:"http://8.153.69.172:10001/proxy_pass2/captchaImage",
    urlInfo:"proxy_pass2"
  },
  {
    url:"http://8.153.69.172:10001/proxy_pass3/captchaImage",
    urlInfo:"proxy_pass3"
  },
  {
    url:"http://8.153.69.172:10001/proxy_pass4/captchaImage",
    urlInfo:"proxy_pass4"
  },
] )

const getInfo = (fit: string) => {
  axios.get(fit.url)
      .then(response => {
      fit.urlInfo = response.data;

      })
      .catch(error => {
        console.error('There was an error!', error);
      });

}

</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 25%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>